<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Memo Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Memo</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
                <h3 class="doc-header">Tag:</h3>
                <pre><code>&lt;gs-memo&gt;&lt;/gs-memo&gt;</code></pre>
                
                <h3 class="doc-header">Description:</h3>
                <div class="doc-section">
                    <p>The purpose of a <code>&lt;gs-memo&gt;</code> control is to hold large amounts of text from the user.</p>
                </div>
                
                <h1 class="doc-header">Examples:</h1>
                <div class="doc-section">
                    <div class="doc-example-description">
                        <span class="h3">Skeleton Example:</span>
                        <p>A basic <code>&lt;gs-memo&gt;</code> element. Without attributes the <code>&lt;gs-memo&gt;</code> control will have the following behaviors:</p>
                        <ol>
                            <li>You can resize the <code>&lt;gs-memo&gt;</code>.</li>
                            <li>A scrollbar will appear when the text is longer then the <code>&lt;gs-memo&gt;</code>.</li>
                        </ol>
                    </div>
                    <gs-doc-example>
                        <template for="html">
                            <gs-memo></gs-memo>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[column]</code>:</span>
                        <p>When you have a <code>gs-memo</code> inside a data element and you want to use it to display cell data you use the <code>column</code> attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="10">
                            <gs-form src="gsdoc.tpeople" where="id=2341">
                                <template>
                                    <b>First Name:</b>
                                    <gs-memo column="first_name"></gs-memo>
                                </template>
                            </gs-form>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[rows]</code>:</span>
                        <p>The <code>rows</code> attribute sets the height of the <code>gs-memo</code> in rows.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="17">
                            <b>First Name:</b>
                            <gs-memo value="This is ten rows tall." rows="10"></gs-memo>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[allow-tab-char]</code>:</span>
                        <p>A default <code>&lt;gs-memo&gt;</code> does not allow tab characters. To allow tab characters add the <code>[allow-tab-char]</code> attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="20">
                            <label for="memo-no-allow-tab-char">Memo Without Tab Characters:</label>
                            <gs-memo id="memo-no-allow-tab-char"></gs-memo>
                            <label for="memo-allow-tab-char">Memo With Tab Characters:</label>
                            <gs-memo id="memo-allow-tab-char" allow-tab-char></gs-memo>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[onchange=""]</code>:</span>
                        <p>To run javascript when the value changes, use the <code>[onchange=""]</code> attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="10">
                            <label for="control_default">Change Alert:</label>
                            <gs-memo id="control_default" onchange="alert('value changed')"></gs-memo>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[value=""]</code>:</span>
                        <p>To set the default value for the <code>&lt;gs-memo&gt;</code>, use the <code>[value=""]</code> attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="20">
                            <label for="memo_default">Memo No Value:</label>
                            <gs-memo id="memo_default"></gs-memo>
                            <label for="memo_value">Memo With Value:</label>
                            <gs-memo id="memo_value" value="testing"></gs-memo>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                    <span class="h3">Attribute <code>[qs=""]</code>:</span><br />
                    <p>The name <code>[qs]</code> stands for "querystring". The querystring is the part in the URL after the "?". The <code>[qs]</code> attribute has two formats, each with their own use.</p>
                    
                    <ul>
                        <li>qs="<i>key1</i>=<i>attribute1</i>". This format allows you to fill any attribute with any key from the querystring. To use multiple keys from the querystring you can put a comma-separated list of these expressions (for example: qs="<i>key1</i>=<i>attribute1</i>,<i>key2</i>=<i>attribute2</i>"). If you need an attribute to be added when a querystring key is not present, replace the "=" with "!=" (for example: qs="<i>key1</i>!=<i>attribute1</i>", attribute1 will only be added if key1 is not in the querystring). As a shorthand, if the key in the querystring is the same name as the attribute you want to fill, you can omit the attribute name in the expression (for example: qs="<i>key1</i>="). If an expression doesn't find it's key in the querystring: it reverts the attribute that it fills to it's original value.</li>
                        <li>qs="<i>key</i>". This format will update the <code>[value]</code> attribute with the querystring whenever the querystring changes.</li>
                    </ul>
                </div>
                <gs-doc-example query-string="test1=true&test2=false">
                    <template for="html" height="35">
                        <gs-memo qs="test1" placeholder="test1"></gs-memo>
                        <gs-memo qs="test2=value" placeholder="test2"></gs-memo>
                        <gs-memo qs="test3=hidden" placeholder="test3"></gs-memo>
                        <gs-memo qs="test4!=hidden" placeholder="test4"></gs-memo>
                        <br />
                        <br />
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test1=true');">Add "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test1');">Remove "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test2=false');">Add "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test2');">Remove "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test3=yes');">Add "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test3');">Remove "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test4=yes');">Add "test4"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test4');">Remove "test4"</gs-button>
                            </gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[placeholder=""]</code>:</span>
                        <p>The <code>[placeholder=""]</code> attribute can be used when you don't want to use a label to explain the purpose of the control to the user. (The label and the placeholder can be used together, that's just not what normally happens.)</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="25">
                            <label for="memo_label">Label:</label>
                            <gs-memo id="memo_label"></gs-memo>
                            <label for="memo_placeholder_label">Placeholder And Label:</label>
                            <gs-memo placeholder="Placeholder And Label" id="memo_placeholder_label"></gs-memo>
                            <gs-memo placeholder="Placeholder" id="memo_placeholder"></gs-memo>
                        </template>
                    </gs-doc-example>
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[autoresize]</code>:</span>
                        <p>Rather then manually resizing the <code>&lt;gs-memo&gt;</code> when the text gets too large, it can automatically resize itself when you use the <code>[autoresize]</code> attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html">
                            <label for="memo_auto">Autoresize:</label>
                            <gs-memo autoresize id="memo_auto"></gs-memo>
                        </template>
                    </gs-doc-example>
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[no-resize-handle]</code>:</span>
                        <p>When you use the <code>[no-resize-handle]</code> attribute, you can no longer resize the memo. When you use both the <code>[autoresize]</code> attribute, you typically also want <code>[no-resize-handle]</code>.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="20">
                            <label for="memo_noresize">No Resize Handle:</label>
                            <gs-memo no-resize-handle id="memo_noresize"></gs-memo>
                            <label for="memo_auto">Auto:</label>
                            <gs-memo autoresize no-resize-handle id="memo_auto"></gs-memo>
                        </template>
                    </gs-doc-example>
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[mini]</code>:</span>
                        <p>Sometimes you are limited on space. The <code>[mini]</code> attribute can be used to make the <code>&lt;gs-memo&gt;</code> smaller.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html">
                            <label for="memo_mini">Mini:</label>
                            <gs-memo id="memo_mini" mini></gs-memo>
                        </template>
                    </gs-doc-example>
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[tabindex=""]</code>:</span>
                        <p>With the <code>[tabindex=""]</code> attribute, you can control what order your controls are tabbed to.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="35">
                            <label for="memo_1">1:</label>
                            <gs-memo tabindex="1" id="memo_1"></gs-memo>
                            <label for="memo_3">3:</label>
                            <gs-memo tabindex="3" id="memo_3"></gs-memo>
                            <label for="memo_2">2:</label>
                            <gs-memo tabindex="2" id="memo_2"></gs-memo>
                            <label for="memo_4">4:</label>
                            <gs-memo tabindex="4" id="memo_4"></gs-memo>
                        </template>
                    </gs-doc-example>
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[disabled]</code>:</span>
                        <p>With the <code>[disabled]</code> attribute, you can control whether or not you can use the control.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="20">
                            <label for="date_disabled">Disabled:</label>
                            <gs-memo disabled id="date_disabled"></gs-memo>
                            <label for="date_enabled">Not Disabled:</label>
                            <gs-memo id="date_enabled"></gs-memo>
                        </template>
                    </gs-doc-example>
                </div>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[readonly]</code>:</span><br />
                    <p>The <code>[readonly]</code> attribute is similar to <code>[disabled]</code> because it prevents the value from changing. The differences are that readonly is styled differently and allows you to copy the current text from the control.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="15">
                        <gs-memo readonly value="Read only"></gs-memo>
                    </template>
                </gs-doc-example>

        </gs-container>
    </body>
</html>
